import {Component, Hook, VueComponent} from "vue3-oop";
import RoleDetailService from "./index.service";
import {NButton, NCard, NForm, NFormItem, NIcon, NInput, NSpace, NTag} from "naive-ui";
import styles from "./index.module.scss";
import DynaTabsPanel from "@/components/panel/DynaTabsPanel";
import { nicon } from "@/utils/IconUtil";

@Component()
export default class RoleDetailView extends VueComponent {

  constructor(
    private service: RoleDetailService,
  ) {
    super()
  }

  @Hook("Mounted")
  onMounted(){
    this.service.loadUserData();
  }

  render() {

    return (
      <NCard
        class={[styles.role_detail_view]}
      >
        {{
          header:()=>(
            <NSpace><NTag bordered={false} size={'large'} style={{fontSize:'18px'}} color={{color:'whitesmoke'}}>
              {{ avatar: nicon("Guardian24Filled"), default: "角色详情" }}
            </NTag></NSpace>
          ),
          'header-extra':()=>(
            <NSpace>
              {!this.service.state.editable && <NButton onClick={this.service.toggleEditable}>编辑</NButton>}
              {this.service.state.editable && <NButton onClick={this.service.saveEditData}>保存</NButton>}
              {this.service.state.editable && <NButton onClick={this.service.toggleEditable}>取消</NButton>}
            </NSpace>
          ),
          default:()=>(
            <>
              <NForm labelPlacement={"left"} inline={true} disabled={!this.service.state.editable}>
                <NFormItem label={"ID"}><NInput value={this.service.state.editData.id} disabled onUpdateValue={(value)=>{this.service.state.editData.id=value}}/></NFormItem>
                <NFormItem label={"角色名"}><NInput value={this.service.state.editData.name} onUpdateValue={(value)=>{this.service.state.editData.name=value}}/></NFormItem>
                <NFormItem label={"编码"}><NInput value={this.service.state.editData.code} onUpdateValue={(value)=>{this.service.state.editData.code=value}}/></NFormItem>
              </NForm>

              <DynaTabsPanel
                showTitle={true}
                icon={"Key20Filled"}
                title={"角色配置"}
                tablePaneList={[
                  // this.service.allcRoleService.panelProps,
                  this.service.allcPrmsService.panelProps,
                  // this.service.validPrmsService.panelProps
                ]}
              />
            </>
          )
        }}
      </NCard>
    )
  }
}